﻿<p>
    <b>Scenario:</b> This task demonstrates CRUD operations on entities using latest technologies and tools.
</p>

<div data-bind="with: newEmployee">
    <div id="employeeEditor" style="display: none">
        <table>
            <caption>Employee Information</caption>
            <tr>
                <th>Name</th>
                <td>
                    <input data-bind="value: Name" name="Name" /></td>
            </tr>
            <tr>
                <th>Title</th>
                <td><input data-bind="value: Title" name="Title" /></td>
            </tr>
            <tr>
                <th>Age</th>
                <td><input data-bind="value: Age" name="Age" /></td>
            </tr>
            <tr>
                <th>Salary</th>
                <td><input data-bind="value: Salary" name="Salary" /></td>
            </tr>
            <tr>
                <th>Manager</th>
                <td><select data-bind="options: $root.Employees, value: ManagerId, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Choose...'"></select></td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <button class="addButton" type="button" data-bind="click:$root.saveEmployee">Save</button>
                    <button class="cancelButton" type="button" data-bind="click:$root.cancelOperation">cancel</button>
                </td>
            </tr>
        </table>
    </div>
    <input type="button" value="Create" data-bind="click:$root.createEmployee" />
    <p>
        <span>Filter By Manager : </span>
        <select data-bind="options: $root.Employees, value: $root.filter, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Choose...'"></select>
    </p>

</div>
<table>
    <caption>Employees Table</caption>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Age</th>
        <th>Salary</th>
        <th>Manager</th>
        <th>Action</th>
    </tr>
    <tbody data-bind="foreach: filterEmployees">
        <tr class="Employee">

            <td class="name"><a data-bind="text: Name, click: $parent.editEmployee"></a></td>
            <td data-bind="text: Title"></td>
            <td data-bind="text: Age" class="Age"></td>
            <td data-bind="text: Salary" class="Salary"></td>
            <td data-bind="text: Manager?Manager.Name:'###'"></td>
            <td>
                <button class="removeButton" data-bind="click: $parent.removeEmployee">remove</button></td>
        </tr>
    </tbody>
</table>
